<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
       角色列表
       <span style="margin-left:5px">
          <el-button @click="add" type="text">添加</el-button>
        </span>
      </div>
       
      <el-table :data="roles" border style="width: 100%">
       
        <el-table-column prop="name" label="角色名称" style="width: 20%"></el-table-column>
        <el-table-column prop="authCode" label="权限标识" style="width: 20%"></el-table-column>
        <el-table-column prop="description" label="角色描述" style="width: 50%"></el-table-column>
        <el-table-column prop="systemed" label="系统权限" style="width: 50%">
          <template slot-scope="scope">
               <span style="color:red" v-if="scope.row.systemed">系统</span>
               <span v-else>普通</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="openbind(scope.row)">绑定</el-button>
            <el-button type="text" size="small" @click="dele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
       <div class="block" style="margin-top:10px;">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagenow"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>

       <el-dialog
      :visible.sync="dialog"
      width="30%"
      center>
        <el-form :model='form' :rules="ruleform" label-width="80px" ref="form"> 
          <el-form-item label="名称" prop="name">
            <el-input  v-model="form.name"></el-input>
          </el-form-item>
          
            <el-form-item label="权限标识" prop="authCode">
                 <el-input  v-model="form.authCode"></el-input>
          </el-form-item>
  
          <el-form-item label="描述" prop="description">
            <el-input  type='textarea' v-model="form.description"></el-input>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
            <el-button @click="dialog=false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>

     <el-dialog :visible.sync="binddialog"  width="30%" center   title="绑定菜单" >
            <el-tree :data="menus" :default-checked-keys="bindMenus"  node-key="id"  ref="tree" show-checkbox :expand-on-click-node="false" >
            </el-tree>
            <el-button type="primary" @click="onbind" size="medium">绑定</el-button>
            <el-button @click="binddialog=false">取消</el-button>
    </el-dialog>


  </div>
</template>

<script>
import { roleList,roleModify,roleDele,roleBind,roleHasMenu,menus} from "@/libs/api.js";
export default {
  methods: {
    add() {
       this.dialog=true;
    },
    edit(row) {
       this.form=row;
       this.dialog=true;
      
    },
    reset(){
       this.form={
        id:"",
        name:"",
        description:"",
        authCode:""
      }
    },
    onbind(){
        let menuIds = this.$refs.tree.getCheckedKeys();
        if(!menuIds || menuIds.length<=0){
            this.$util.errorMsg("请先选择要绑定的资源");
            return ;
        }
        this.bindMenusParam.menuIds=this.$refs.tree.getCheckedKeys();
         roleBind(this.bindMenusParam).then((res) => {
            this.$util.success("绑定成功");
            this.binddialog=false;
        })
    },
    openbind(row){
        this.binddialog=true;
         this.bindMenusParam.roleId=row.id;
         this.bindMenus=[];
          roleHasMenu(row.id).then((res) => {
              if(res && res.length>0){
                for(var i=0;i<res.length>0;i++){
                  this.bindMenus.push(res[i].id);
                }
              }
               menus().then((res) => {
                this.menus=res;
              });
          })
        
        
    },
    dele(row){
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
               roleDele(row.id).then(res => {
                  this.$util.afterDele(this.roles,row.id);
              });
          }).catch(() => {         
         });
    },
    onSubmit(){
      this.$refs['form'].validate((valid) => {
              if (!valid) {
                return;
              }
                roleModify(this.form).then((res) => {
                  this.$util.success();
                  //修改
                  if(this.form.id){
                    for(var i=0;i<this.roles.length;i++){
                      if(this.roles[i].id==this.form.id){
                        this.roles[i]=res;
                      }
                    }
                  }else{//添加
                      this.roles.push(res);
                  }
                  this.dialog=false;
                  this.reset();
              })
         });
    },
       /**
     * 分页
     */
    handleCurrentChange(p) {
      this.loadPage(p);
    },
    loadPage() {
      var param = { pagesize: 10, pagenow: this.pagenow};
      roleList(param).then(res => {
        this.roles = res.rows;
        this.total = res.total;
      });
    }
  },

  mounted() {
    this.loadPage();
  },

  data() {
    return {
      roles: [],
      total: 0,
      pagenow: 1,
      pagesize: 10,
      dialog:false,
      binddialog:false,//绑定菜单的弹框
      menus:[],//菜单
      bindMenus:[],//已经绑定的菜单
      bindMenusParam:{},//绑定菜单的参数
       form:{
        id:"",
        name:"",
        authCode:"",
        description:""
      },
        ruleform: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          authCode: [
            {  required: true, message: '请输入权限标识如(ROLE_ADMIN)', trigger: 'blur' }
          ]
        }
    };
  }
};
</script>